<template>
  <div class="mainpage">
    <div class="routers">
        <router-view/>
    </div>
    <div class="tabbar">
        <div class="tabitem">
            <img v-for="(item,index) in tabList" :key="index" :src="item.img" :class="{active:item.url == $route.path}" @click="gotoUrl(item.url)"/>
        </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      tabList: [
        { url: '/home', img: require('@/assets/tabbar/home.svg') },
        { url: '/select', img: require('@/assets/tabbar/select.svg') },
        { url: '/borrow', img: require('@/assets/tabbar/borrow.svg') },
        { url: '/user', img: require('@/assets/tabbar/setting.svg') }
      ]
    }
  },
  methods: {
    gotoUrl (url) {
      this.$router.push({ path: url })
    }
  },
  mounted () {
  }
}
</script>
<style lang='less' scoped>
.active{
  filter: drop-shadow(#06070D 1000px 0);
  transform: translateX(-1000px);
}
.mainpage{
    width: 100%;
    height: 100%;
  //  background-image: url('../assets/collectbg.png');
   background-size: 100% 100%;
   background-position: center;
}
.routers{
    width: 100%;
    height: calc(100% - 100px);
    overflow: auto;
}
.tabbar{
    width: 100%;
    height: 100px;
    position: absolute;
    bottom: 0;
    display: flex;
    justify-content: center;
    .tabitem{
        background: #ffffff;
        width: 90%;
        height: 90%;
        border-radius: 15px;
        border: 1px solid #eee;
        box-shadow: -1px 16px 9px 5px #eee;
        display: flex;
        align-items: center;
        justify-content: space-around;
    }
}
</style>
